<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Password Generator</title>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js" defer></script>
    </head>
    <body>
        <div class="pw-container">
            <div class="pw-header">
                <div class="pw">
                    <span id="pw">l823Zs78#Css09@</span>
                    <button id="copy">Copy</button>
                </div>
            </div>
            <div class="pw-body">
                <div class="form-control">
                    <label for="len">Password Length</label>
                    <input id="len" value="15" type="number" min="2" max="30" />
                </div>
                <div class="form-control">
                    <label for="upper">Contain Uppercase Letters</label>
                    <input id="upper" type="checkbox" />
                </div>
                <div class="form-control">
                    <label for="lower">Contain Lowercase Letters</label>
                    <input id="lower" type="checkbox" />
                </div>
                <div class="form-control">
                    <label for="number">Contain Numbers</label>
                    <input id="number" type="checkbox" />
                </div>
                <div class="form-control">
                    <label for="symbol">Contain Symbols</label>
                    <input id="symbol" type="checkbox" />
                </div>
                <button class="generate" id="generate">
                    Generate Password
                </button>
            </div>
        </div>
    </body>
</html>
